<template>
  <div id="shopHome">
    <Head></Head>
    <div class="conter">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        router
      >
        <el-menu-item index="/commodity">商品</el-menu-item>
        <el-menu-item index="/evaluate">评价</el-menu-item>
        <el-menu-item index="/merchant">商家</el-menu-item>
      </el-menu>
      <router-view />
    </div>
  </div>
</template>


<script>
import Head from "./Head";
export default {
  props: [],
  data() {
    return {
      activeIndex: "/commodity",
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      // console.log(key, keyPath);
    },
  },
  components: {
    Head,
  },
};
</script>


<style scoped>
#shopHome {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.conter {
  flex: 1;
  
}
.el-menu--horizontal > .el-menu-item.is-active {
  border: none;
  color: red;
}
.el-menu--horizontal > .el-menu-item {
  border: none;
}
.el-menu {
  display: flex;
  justify-content: space-between;
}
.el-menu-item {
  font-size: 0.28rem;
}
</style>